@import 'var';

$utilities: () !default;
$utilities: map-merge(
    (
        'bg-color': (
            property: background-color,
            class: bg,
            values: map-merge($bg-colors, (auto: auto))
        ),
        'margin': (
            responsive: true,
            property: margin,
            class: m,
            values: map-merge($spacers, (auto: auto))
        ),
        'margin-top': (
            responsive: true,
            property: margin-top,
            class: mt,
            values: map-merge($spacers, (auto: auto))
        ),
        'margin-right': (
            responsive: true,
            property: margin-right,
            class: mr,
            values: map-merge($spacers, (auto: auto))
        ),
        'margin-bottom': (
            responsive: true,
            property: margin-bottom,
            class: mb,
            values: map-merge($spacers, (auto: auto))
        ),
        'margin-left': (
            responsive: true,
            property: margin-left,
            class: ml,
            values: map-merge($spacers, (auto: auto))
        ),
        'padding': (
            responsive: true,
            property: padding,
            class: p,
            values: map-merge($spacers, (auto: auto))
        ),
        'padding-top': (
            responsive: true,
            property: padding-top,
            class: pt,
            values: map-merge($spacers, (auto: auto))
        ),
        'padding-right': (
            responsive: true,
            property: padding-right,
            class: pr,
            values: map-merge($spacers, (auto: auto))
        ),
        'padding-bottom': (
            responsive: true,
            property: padding-bottom,
            class: pb,
            values: map-merge($spacers, (auto: auto))
        ),
        'padding-left': (
            responsive: true,
            property: padding-left,
            class: pl,
            values: map-merge($spacers, (auto: auto))
        ),
        'font-color': (
            property: color,
            class: text,
            values: map-merge($colors, (auto: auto))
        ),
        'font-size': (
            responsive: true,
            property: font-size,
            class: text,
            values: map-merge($font-size, (auto: auto))
        ),
    ),
    $utilities
);

@each $key, $utility in $utilities {
    @if type-of($utility) == 'map' {
        $values: map-get($utility, values);
        @if type-of($values) == 'string' or type-of(nth($values, 1)) != 'list' {
            $values: zip($values, $values);
        }
        @each $key, $value in $values {
            $properties: map-get($utility, property);
            @if type-of($properties) == 'string' {
                $properties: append((), $properties);
            }
            $property-class: if(map-has-key($utility, class), map-get($utility, class), nth($properties, 1));
            $property-class: if($property-class == null, '', $property-class);
            $property-class-modifier: if($key, if($property-class == '', '', '-') + $key, '');
            .#{$property-class + $property-class-modifier} {
                @each $property in $properties {
                    #{$property}: $value !important;
                }
            }
        }
    }
}